<template>
    <div id="system-box">
        <el-header>阿里妈妈车位租赁管理系统</el-header>

        <div class="all">
            <div class="box">
                <h2>出租方注册</h2>
                <el-form ref="form" :model="form" label-width="80px" >
                    <el-form-item label="用户名:">
                        <el-input v-model="form.username" @blur="registerAble({username:form.username})" ></el-input>
                    </el-form-item>
                    <el-form-item label="密码:">
                        <el-input type="password" v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码:">
                        <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                    <el-form-item id="register-box">
                        <el-button type="success" @click="doRegister(form)"
                            >立即注册</el-button
                        >
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <el-footer></el-footer>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex"
const { mapActions } = createNamespacedHelpers('lessors')
export default {
    data() {
        return {
            form: {
                username: "",
                password: "",
                phone:''
            },
            bool:true //可否注册
        };
    },
     computed:{
       
    },

    methods: {
        ...mapActions(['register','checkUsername']),
        async registerAble(username){
            const data = await this.checkUsername(username);
            if(!data.status){
                this.bool = false
                alert("该账号已被注册")
            }else{
                this.bool = true
            }
        },
        doRegister(form){
            if(this.bool){
                this.register(form);
                alert("注册成功")
                this.$router.push('/login')
            }else{
                alert("请确认账号")
            }
        },
        
    },
};
</script>

<style scoped  lang='scss'>
#system-box {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .el-header {
        height: 50px;
        background: lightgreen;
        line-height: 50px;
        font-size: 30px;
        font-weight: bolder;
    }
    .all {
        // width: 400px;
        margin: 0 auto;
        flex: 1;
        .box{
            border: rgb(20, 197, 20) 2px solid;
            height: 400px;
            width: 500px;
            padding: 30px 50px;
            margin: 70px auto;
            border-radius: 15px;
        }
        h2 {
            text-align: center;
            padding: 0;
            margin: 0 0 20px 0;
        }
        #register-box{
            text-align: center;
        }
    }
    .el-footer {
        height: 50px;
        background: lightgreen;
    }
}
</style>